<template>
  <!-- 编码基础 -->
  <Layout class="codingSortManager">
      <div>
        <Form ref="form1"  :label-width="120">
            <Row  v-show="!switchFlag" class="query-form" style="padding-top: 15px">
                <Col span="8">
                    <FormItem label="编码编号：">
                        <Input class="query-form-el" type="text" v-model="codingSortId"></Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="编码中文名称：">
                        <Input class="query-form-el" type="text" v-model="codingSortName" />
                    </FormItem>
                </Col>
                <Col span="8">
                    <!--<Button @click="switchQuery(true)" class="ivu-btn-switch" type="text"  >展开∨</Button>-->
                    <Button @click="reset" class="ivu-btn-reset"  >重置</Button>
                    <Button  class="ivu-btn-query"   icon="md-search"  @click="queryCodingSort">查询</Button>
                </Col>
            </Row>
            <Row class="query-form">
                <Col span="24">
                    <Button size="large" type="success"  class="ivu-btn-add" icon="md-add" @click="addCodingSort({})">新增</Button>
                </Col>
            </Row>
        </Form>
      </div>
      <!-- 响应结果内容展示 -->
      <Table ref='table' :loading="buttonLoading" :height="tableHeight" :row-class-name="rowClassName" no-data-text="没有查询到相关数据!"
           stripe border :columns="columns1" :data="resultData" size="small">
      </Table>
      <!-- 底部分页条 -->
    <Page :total="dataCount" :page-size="pageSize"
          :page-size-opts="pageSizeArray" @on-change="changepage"
          @on-page-size-change="nowPageSize" show-total show-sizer />

    <!--弹出窗  @on-cancel="cancel":当点击取消触发的函数-->
    <div class="parent">
       <Modal v-model="model"  :transfer=false :width=600  :closable="false" :mask-closable="false" @on-ok="addOrUpdate()">
            <Row>
                <Col span="24">
                    <Form ref="formCustom" :model="formCustom" :rules="ruleCustom"  label-position="top">
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11" >
                                <FormItem label="编码编号" prop="codingSortId">
                                  <Input type="text" v-model="formCustom.codingSortId"></Input>
                                </FormItem>
                            </Col>
                            <Col span="11">
                               <FormItem label="编码名称" prop="loginId">
                                  <Input type="text" v-model="formCustom.codingSortName"></Input>
                              </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                          <Col span="11">
                              <FormItem label="编码英文名称" prop="codingSortEnName">
                                  <Input type="text" v-model="formCustom.codingSortEnName"></Input>
                              </FormItem>
                          </Col>
                          <Col span="11">
                              <FormItem label="编码西班牙文名称" prop="codingSortEsName">
                                  <Input type="text" v-model="formCustom.codingSortEsName"></Input>
                              </FormItem>
                          </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                          <Col span="11">
                              <FormItem label="编码俄文名称" prop="codingSortRuName">
                                  <Input type="text" v-model="formCustom.codingSortRuName"></Input>
                              </FormItem>
                          </Col>
                          <Col span="11">
                              <FormItem label="编码法文名称" prop="codingSortFrName">
                                  <Input type="text" v-model="formCustom.codingSortFrName"></Input>
                              </FormItem>
                          </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                          <Col span="11">
                              <FormItem label="层级数" prop="codingFrame">
                                  <Input type="text" v-model="formCustom.codingFrame"></Input>
                              </FormItem>
                          </Col>
                        <Col span="11">
                        </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                          <Col span="23">
                              <FormItem label="说明" prop="sortRemark">
                                  <Input  v-model="formCustom.sortRemark" type="textarea" :autosize="{minRows: 2,maxRows: 5}" ></Input>
                              </FormItem>
                          </Col>
                        </Row>
                      <!--  <Row type="flex" justify="right" class="code-row-bg">
                            <Col span="23" >
                                <FormItem>
                                    <Button   class='ivu-btn-save' @click="addOrUpdate()" >确定</Button>
                                    <Button type="text"  class='ivu-btn-cancel'  @click="modalcancel" >取消</Button>
                                </FormItem>
                            </Col>
                        </Row>-->
                    </Form>
                </Col>
            </Row>
           <div slot="footer">
               <Button class='ivu-btn-save' @click="addOrUpdate()" >确定</Button>
               <Button type="text"  class='ivu-btn-cancel'  @click="modalcancel" >取消</Button>
           </div>
        </Modal>
    </div>

  </layout>

</template>

<script>
  import {Api} from "../../../api/index.js"
  export default {
    data() {
      return {
        switchFlag : false,
        formCustom:{},
        ruleCustom:{},
      	tableHeight:450,
        styleArr: [
          {lineHeight: '30px', width: '220px'}
        ],
        divStyle: {marginTop: '20px'},
        btn: {
          width: '80px',
          height: '36px',
          color: '#fff',
          borderRadius: '4px',
          border: '1px solid #dcdee2',
          textAlign: 'center',
          verticalAlign: 'middle',
          marginLeft: '10px',
        },buttonLoading:false,
        pageSizeArray: [10, 20, 50],
        dataCount: 0,
        pageSize: 10,
        currentPage: 1,
        columns1: [
          {
            title: "序号",
            width: 80,
            align: "center",
            render: (h, params) => {
              return h('span', params.index + (this.currentPage - 1) * this.pageSize + 1);
            }
          },
          {
            title: '编码编号',
            align: 'center',
            key: 'codingSortId'
          },
          {
            title: '编码中文名称',
            key: 'codingSortName',
            align: 'center'
          },
          {
            title: '操作',
            align: 'center',
            key: 'view',
            fixed: 'right',
            width: 200,
            render: (h, params) => {
                return h('div', [
                    h('A', {
                        props: {
                            type: 'primary',
                            size: 'small'
                        },
                        style: {
                            fontSize: '14px'
                        },
                        on: {
                            click: () => {
                              this.addCodingSort(params.row);
                            }
                        }
                    }, '修改'), h('Divider', {
                        props: {
                            type: 'vertical',
                        }
                    }, ''),
                    h('A', {
                        props: {
                            type: 'primary',
                            size: 'small'
                        },
                        style: {
                            fontSize: '14px',
                        },
                        on: {
                          click: () => {
                            this.toDetail(params.row);
                          }
                        }
                      }, '维护明细'), h('Divider', {
                        props: {
                            type: 'vertical',
                        }
                    }, ''),
                      h('A', {
                        props: {
                            type: 'error',
                            size: 'small'
                        },
                        style: {
                            fontSize: '14px',
                            color: 'red'
                        },
                       on: {
                        click: () => {
                          this.deleteStaDeviceUse(params.row.entityId, params.row);
                        }
                      }
                    }, '删除')
              ]);
            }
          }
        ],
        model: false,
        add: false,
        select: {},
        codingSortId: '',
        codingSortName: '',
        resultData: [],

        entity: {
          entityId: null,
          codingSortId: null,
          codingSortName: null
        },

      }
    },
    mounted: function () {
        this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 145;
        //页面加载执行的查询函数,返回的总条数,激活前端分页插件的页码功能.
        this.queryCodingSort();
    },
    methods: {
      /* switchQuery(flag){
            this.switchFlag = flag;
            if(!this.switchFlag){
                this.tableHeight = window.innerHeight - 205;
            }else{
                this.tableHeight = window.innerHeight - 205;
            }
        },*/
        modalcancel(){
            this.formCustom = {};
            this.model = false;
        },
        addCodingSort(row) {
            if (Object.keys(row).length == 0) {
              this.add = true;
            } else {
              this.add = false;
            }
            this.model = true;
            this.formCustom = row;
        },
      //重置输入框
      reset: function () {
        this.codingSortId = '';
        this.codingSortName = '';
      },
      addOrUpdate: function () {
        if (this.add) {
          this.save();
        } else {
          this.updateCodingSort();
        }
      },

      updateCodingSort: function () {
        this.$http.post(Api.updateCodeSort, this.formCustom).then((res) => {
            var status = res.data.result;//总条数
            if (status != 'fail') {
                this.reset();
                this.queryCodingSort();
                this.model = false;
                this.$Message.info('修改成功');
            } else {
                this.$Message.info(res.data.message);
            }
        });
      },
      //添加
      save() {
        this.$http.post(Api.addCodeSort, this.formCustom).then((res) => {
          var status = res.data.result;//总条数
          if (status != 'fail') {
              this.reset();
            this.queryCodingSort();
            this.model = false;
            this.$Message.info('添加成功');
          } else {
            this.$Message.info(res.data.message);
          }
        });
      },
      //删除
      deleteStaDeviceUse: function (entityId, row) {
        let istrue = confirm("是否确定删除?");
        if (istrue) {
          this.$http.get(Api.deleteCodeSort + '/' + entityId,{params:{}}).then((res) => {
            if (res.data.status == 200) {
              this.$Message.info('删除成功');
              this.queryCodingSort();
            } else {
              this.$Message.info('删除失败');
            }
          });
        }
      },
      // 查询编码大类列表
      getInfo: function () {
        if (this.codingSortId == undefined) {
          this.codingSortId = "";
        }
        if (this.codingSortName == undefined) {
          this.codingSortName = "";
        }
        this.$http.get(Api.queryCodeSort + "?fromPage=" + this.currentPage + "&pageSize=" + this.pageSize + "&codingSortId=" +
          this.codingSortId + "&codingSortName=" + this.codingSortName+"&flag=1").then((res) => {
          this.dataCount = res.data.total;//总条数
          this.resultData = res.data.data;//查询到的所有编码
        })
      },

      queryCodingSort() {
        this.dataCount = 0;
        this.currentPage = 1;
        this.getInfo();
      },
      changepage(pageIndex) {
        //当页码改变,选择获取当前页数,发送查询请求
        this.currentPage = pageIndex;
        this.getInfo();
      },
      nowPageSize(size) {
        this.pageSize = size;
        this.currentPage = 1;
        this.getInfo();
      },
      rowClassName(row, index) {
        return 'tdHeight';
      },
        //跳转到明细页面
      toDetail(row){
            this.$router.push({name: 'codingDetailManager',params:{ codingSortId:row.codingSortId, codingSortName:row.codingSortName}});
      }
    }
  }

</script>

<style lang='css' scoped>
    @import '../../../index.css';

</style>
